<template>
  <div class="account-container">
    <a-spin :spinning="!$store.state.isLogin" tip="加载中...">
      <a-layout>
      <a-layout-sider>
        <a-card class="sider-top-card" :bordered="false">
          <loading-outlined v-if="!$store.state.isLogin" />
          <img :src="baseUrl+'/storage/'+$store.state.userInfo.portrait" alt="portrait" width="80" height="80" v-else-if="$store.state.userInfo.portrait">
          <img :src="$store.state.userInfo.wechat_avatar" alt="wechat_avatar" width="80" height="80" v-else-if="$store.state.userInfo.wechat_avatar">
          <img src="@/assets/img/account-img/profile-photo.png" alt="profile-photo" width="80" height="80" v-else>
          <h3>{{ store.state.userInfo.nickname }}</h3>
        </a-card>
        <a-card class="sider-menu-card" :bordered="false">
          <a-menu v-model:selected-keys="state.selectKey" mode="inline">
            <a-menu-item key="index" class="sider-menu-index" @click="$router.push('/')">我的首页</a-menu-item>
            <a-menu-item key="info">
              <span>个人信息</span>
            </a-menu-item>
            <a-menu-item key="logout" @click="$router.push('/logout')">
              <span>退出登录</span>
            </a-menu-item>
          </a-menu>
        </a-card>
      </a-layout-sider>
      <a-layout-content>
        <a-card class="content-card" title="个人信息" :bordered="false">
          <a-descriptions :column="1">
            <a-descriptions-item>
              <template #label>
                头&emsp;&emsp;像
              </template>
              <div class="profile-box">
                <loading-outlined v-if="!$store.state.isLogin" />
                <img :src="baseUrl+'/storage/'+$store.state.userInfo.portrait" alt="portrait" width="120" height="120" v-else-if="$store.state.userInfo.portrait">
                <img :src="$store.state.userInfo.wechat_avatar" alt="wechat_avatar" width="120" height="120" v-else-if="$store.state.userInfo.wechat_avatar">
                <img src="@/assets/img/account-img/profile-photo.png" alt="profile-photo" width="120" height="120" v-else>
                <div class="profile-edit" @click="state.showUploadImg = true">
                  <span>修改</span>
                </div>
              </div>
            </a-descriptions-item>
            <a-descriptions-item>
              <template #label>
                昵&emsp;&emsp;称
              </template>
              <span>
                {{ store.state.userInfo.nickname }}
              </span>
              <a-button type="primary" @click="nickNameData.showNickName = true">修改</a-button>
            </a-descriptions-item>
            <a-descriptions-item>
              <template #label>
                账&emsp;号 ID
              </template>
              <span>
                {{ store.state.userInfo.user_id }}
              </span>
            </a-descriptions-item>
            <a-descriptions-item>
              <template #label>
                手&ensp;机&ensp;号
              </template>
              <span>
                {{ store.state.userInfo.mobile || '暂未绑定'  }}
              </span>
              <a-button type="primary" @click="phoneNextData.showChangePhone = true" v-if="$store.state.userInfo.mobile">修改</a-button>
              <a-button type="primary" @click="bindPhoneData.showBindPhone = true" v-else>绑定</a-button>
            </a-descriptions-item>
            <a-descriptions-item label="登录密码">
              <a-badge count="已设置" :number-style="{ backgroundColor: '#60B13C' }" v-if="$store.state.passwordSet == 1" />
              <a-badge count="未设置" :number-style="{ backgroundColor: '#DA424F' }" v-else />
              <a-button type="primary" @click="passwordData.showPassword = true">
                {{ store.state.passwordSet == 1 ? '修改' : '设置'}}
              </a-button>
            </a-descriptions-item>
            <a-descriptions-item>
              <template #label>
                微&ensp;信&ensp;号
              </template>
              <div class="wechat-account">
                <span v-if="$store.state.userInfo.open_id">
                  <img :src="$store.state.userInfo?.wechat_avatar" width="40" height="40" alt="wechat_avatar">
                  {{ store.state.userInfo?.wechat_nickname }}
                </span>
                <span v-else>
                  <img src="@/assets/img/account-img/wechat-icon.svg" alt="wechat-icon" width="40" height="40">
                  暂未绑定微信账号
                </span>
              </div>
              <a-button @click="UnboundWx" v-if="$store.state.userInfo.open_id">解绑</a-button>
              <a-button @click="openBindWx" v-else>绑定</a-button>
            </a-descriptions-item>
            <a-descriptions-item label="注册时间">{{ store.state.userInfo.create_time }}</a-descriptions-item>
            <a-descriptions-item label="注册方式">
              <img src="@/assets/img/account-img/phone-icon-colorful.svg" alt="phone-icon-colorful" v-if="$store.state.userInfo.reg_type == 1">
              <img src="@/assets/img/account-img/wechat-icon.svg" alt="wechat-icon" v-if="$store.state.userInfo.reg_type == 2">
            </a-descriptions-item>
          </a-descriptions>
        </a-card>
      </a-layout-content>
    </a-layout>
    </a-spin>

    <a-modal v-model:visible="state.showWechat" width="400px" title="绑定微信" wrapClassName="bind-wechat" :footer="false" @cancel="closeDialog('bindWechat')" centered>
      <template #closeIcon>
        <img src="@/assets/img/account-img/close-icon.png" alt="close-icon">
      </template>
      <a-spin tip="加载二维码中..." :spinning="state.gettingQrcode">
        <div class="qrcode-img-box">
          <qrcode-vue class="qrcode-vue" :value="state.wechatUrl" :size="158" @click="getWechatUrl" />
          <div class="qrcode-cover" v-if="!state.qrcodeIsVaild" @click="getWechatUrl">
            <img src="@/assets/img/account-img/refresh-icon.png" alt="refresh" width="32" height="29">
            <span class="main-text">二维码已失效</span>
            <a-button type="text" class="primary-text">点击刷新</a-button>
          </div>
        </div>
      </a-spin>
    </a-modal>

    <a-modal v-model:visible="state.showUploadImg" width="400px" title="修改头像" wrapClassName="update-img" :footer="false" @cancel="closeDialog('uploadImg')" centered>
      <template #closeIcon>
        <img src="@/assets/img/account-img/close-icon.png" alt="close-icon">
      </template>
      <a-upload v-model:file-list="state.fileList" list-type="picture-card" :show-upload-list="false" :before-upload="beforeUpload" :disabled="state.uploading" @change="handleChange" name="img" :action="baseUrl+'/upload_img'" :headers="state.headers">
        <img v-if="state.imageUrl" :src="state.imageUrl" alt="avatar" width="102" height="102" />
        <div v-else>
          <loading-outlined v-if="state.uploading"></loading-outlined>
          <plus-outlined v-else></plus-outlined>
          <div class="ant-upload-text">{{ state.uploading ? '上传中' : '上传头像' }}</div>
        </div>
      </a-upload>
      <div class="upload-tips">
        <p>图片大小必须小于2MB</p>
        <span>仅支持jpg或png格式的图片</span>
      </div>
    </a-modal>

    <a-modal v-model:visible="nickNameData.showNickName" width="480px" title="修改昵称" wrapClassName="update-nickname" :footer="false" @cancel="closeDialog('nickNameFormRef')" centered>
      <template #closeIcon>
        <img src="@/assets/img/account-img/close-icon.png" alt="close-icon">
      </template>
      <a-form ref="nickNameFormRef" :model="nickNameData.nicknameForm" @finish="updateNickName">
        <a-form-item name="nickname" :hasFeedback="true" :rules="[{ required: true, message: '请输入新的昵称' }]">
          <a-input v-model:value.trim="nickNameData.nicknameForm.nickname" allowClear placeholder="请输入新的昵称"/>
        </a-form-item>
        <a-form-item class="form-btn-group">
          <a-button @click="closeDialog('nickNameFormRef')" :disabled="nickNameData.updatingNickname">取消</a-button>
          <a-button type="primary" html-type="submit" :loading="nickNameData.updatingNickname">确定</a-button>
        </a-form-item>
      </a-form>
    </a-modal>

    <a-modal v-model:visible="phoneNextData.showChangePhone" width="480px" title="修改手机号" wrapClassName="update-phone" :footer="false" @cancel="closeDialog('changePhoneFormRef')" centered destroy-on-close>
      <template #closeIcon>
        <img src="@/assets/img/account-img/close-icon.png" alt="close-icon">
      </template>
      <a-form ref="changePhoneFormRef" :model="phoneNextData.changPhoneForm" :rules="$store.state.rules" @finish="phoneNext" @finishFailed="formFailed">
        <div v-if="phoneNextData.phoneStep === 1">
          <a-form-item name="old_mobile" :hasFeedback="true" :rules="[{ required: true, validator: validatePhone }]">
            <a-input v-model:value.trim="phoneNextData.changPhoneForm.old_mobile" allowClear placeholder="请输入您当前的手机号"/>
          </a-form-item>
          <a-form-item class="code-form-item" name="code">
            <div class="code-input-box">
              <a-input v-model:value="phoneNextData.changPhoneForm.code" allowClear placeholder="请输入验证码"/>
              <a-divider type="vertical"/>
              <a-button type="text" class="success-text" :disabled="disabledGetYzmBtn(phoneNextData.changPhoneForm.old_mobile)" @click="$store.commit('getYzm',phoneNextData.changPhoneForm.old_mobile)" v-if="!$store.state.showCountDown">
                发送验证码
              </a-button>
              <div class="getting-code" v-else>
                {{ $store.state.countDownNum }}s后重新发送
              </div>
            </div>
          </a-form-item>
        </div>
        <div v-else-if="phoneNextData.phoneStep === 2">
          <a-form-item name="new_mobile" :hasFeedback="true" :rules="[{ required: true, validator: validatePhone }]">
            <a-input v-model:value.trim="phoneNextData.changPhoneForm.new_mobile" allowClear placeholder="请输入您新的手机号"/>
          </a-form-item>
          <a-form-item class="code-form-item" name="new_code" :rules="[{ required: true, validator: validateCode }]">
            <div class="code-input-box">
              <a-input v-model:value="phoneNextData.changPhoneForm.new_code" allowClear placeholder="请输入验证码"/>
              <a-divider type="vertical"/>
              <a-button type="text" class="success-text" :disabled="disabledGetYzmBtn(phoneNextData.changPhoneForm.new_mobile)" @click="$store.commit('getYzm',phoneNextData.changPhoneForm.new_mobile)" v-if="!$store.state.showCountDown">
                发送验证码
              </a-button>
              <div class="getting-code" v-else>
                {{ $store.state.countDownNum }}s后重新发送
              </div>
            </div>
          </a-form-item>
        </div>
        <div class="step-complete" v-else>
          <img src="@/assets/img/account-img/complete-icon.png" alt="complete-icon">
          <p>修改成功</p>
          <p>您已成功修改新手机号，欢迎使用！</p>
          <a-button type="primary" @click="closeDialog('changePhoneFormRef')">我知道了</a-button>
        </div>
        <a-form-item class="form-btn-group" v-if="[1,2].includes(phoneNextData.phoneStep)">
          <a-button @click="closeDialog('changePhoneFormRef')" :disabled="phoneNextData.phoneNextLoading">取消</a-button>
          <a-button type="primary" html-type="submit" :loading="phoneNextData.phoneNextLoading">下一步</a-button>
        </a-form-item>
      </a-form>
    </a-modal>

    <a-modal v-model:visible="bindPhoneData.showBindPhone" width="480px" title="绑定手机号" wrapClassName="bind-phone" :footer="false" @cancel="closeDialog('bindPhoneFormRef')" centered :keyboard="false" :maskClosable="false">
      <template #closeIcon>
        <img src="@/assets/img/account-img/close-icon.png" alt="close-icon">
      </template>
      <a-form ref="bindPhoneFormRef" :model="bindPhoneData.bindPhoneForm" :rules="$store.state.rules" @finish="bindPhoneNum" @finishFailed="formFailed">
        <a-form-item name="mobile" :hasFeedback="true" :rules="[{ required: true, validator: validateBindPhone }]">
          <a-input v-model:value.trim="bindPhoneData.bindPhoneForm.mobile" :disabled="bindPhoneData.disabledBindInput" allowClear placeholder="请输入您的手机号"/>
        </a-form-item>
        <a-form-item class="code-form-item" name="code">
          <div class="code-input-box">
            <a-input v-model:value="bindPhoneData.bindPhoneForm.code" allowClear placeholder="请输入验证码"/>
            <a-divider type="vertical"/>
            <a-button type="text" class="success-text" :disabled="bindPhoneData.disabledBindPhoneYzm" @click="$store.commit('getYzm',bindPhoneData.bindPhoneForm.mobile)" v-if="!$store.state.showCountDown">
              发送验证码
            </a-button>
            <div class="getting-code" v-else>
              {{ $store.state.countDownNum }}s后重新发送
            </div>
          </div>
        </a-form-item>
        <a-button class="bind-phone-btn" type="primary" html-type="submit" :loading="bindPhoneData.bindIng">绑定</a-button>
      </a-form>
    </a-modal>

    <a-modal v-model:visible="passwordData.showPassword" width="480px" title="修改密码" wrapClassName="update-password" :footer="false" @cancel="closeDialog('passwordFormRef')" centered>
      <template #closeIcon>
        <img src="@/assets/img/account-img/close-icon.png" alt="close-icon">
      </template>
      <a-form ref="passwordFormRef" :model="passwordData.passwordForm" :rules="$store.state.rules" @finish="updatePassword" @finishFailed="formFailed">
        <div v-if="!passwordData.updatePwdOk">
          <a-form-item name="mobile" :hasFeedback="true" :rules="[{ required: true, validator: validatePhone }]">
            <a-input v-model:value.trim="passwordData.passwordForm.mobile" allowClear placeholder="请输入您的手机号"/>
          </a-form-item>
          <a-form-item name="password" :hasFeedback="true">
            <a-input v-model:value.trim="passwordData.passwordForm.password" allowClear placeholder="请输入8-16位包含字母和数字的密码" />
          </a-form-item>
          <a-form-item class="code-form-item" name="code">
            <div class="code-input-box">
              <a-input v-model:value="passwordData.passwordForm.code" allowClear placeholder="请输入验证码"/>
              <a-divider type="vertical"/>
              <a-button type="text" class="success-text" :disabled="disabledGetYzmBtn(passwordData.passwordForm.mobile)" @click="$store.commit('getYzm',passwordData.passwordForm.mobile)" v-if="!$store.state.showCountDown">
                发送验证码
              </a-button>
              <div class="getting-code" v-else>
                {{ $store.state.countDownNum }}s后重新发送
              </div>
            </div>
          </a-form-item>
        </div>
        <div class="step-complete" v-else>
          <img src="@/assets/img/account-img/complete-icon.png" alt="complete-icon">
          <p>修改成功</p>
          <p>您已成功修改新密码，下次可使用新密码登录！</p>
          <a-button type="primary" @click="closeDialog('passwordFormRef')">我知道了</a-button>
        </div>
        <a-form-item class="form-btn-group" v-if="!passwordData.updatePwdOk">
          <a-button @click="closeDialog('passwordFormRef')" :disabled="passwordData.updatingPwd">取消</a-button>
          <a-button type="primary" html-type="submit" :loading="passwordData.updatingPwd">确定</a-button>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup>
import {ExclamationCircleOutlined, LoadingOutlined, PlusOutlined} from '@ant-design/icons-vue'
import {reactive, getCurrentInstance, createVNode} from 'vue'
import {validatePhone, validateCode, disabledGetYzmBtn, formFailed} from '@/plugin/validate'
import {baseUrl, changeMobile, changeNickname, changeImg, verifyYzm, uploadImg, forgetPwd, unboundWechat, changStatus, bindWechat, checkMobile} from '@/axios'
import {useStore} from 'vuex'
import {useRouter, useRoute} from 'vue-router'
import QrcodeVue from 'qrcode.vue'
import {encryptedData} from '@/plugin/encrypted'
import {Modal} from 'ant-design-vue'
const router = useRouter()
const route = useRoute()
const store = useStore()
const {proxy} = getCurrentInstance()

const state = reactive({
  selectKey: ['info'],
  showWechat: false,
  gettingQrcode: false,
  qrcodeIsVaild: false,
  showUploadImg: false,
  fileList: [],
  uploading: false,
  imageUrl: '',
  headers: {
    token: localStorage.getItem('userToken')
  }
})

// onMounted(()=>{
//   document.querySelector('.bind-phone .ant-modal-close') ? document.querySelector('.bind-phone .ant-modal-close').remove() : ''
// })

const openBindWx = ()=>{
  clearInterval(qrcodeInterval)
  state.showWechat = true
  getWechatUrl()
}

let qrcodeInterval
const getWechatUrl = async ()=>{
  state.gettingQrcode = true
  clearInterval(qrcodeInterval)
  const wechatRes = await bindWechat()
  if(wechatRes.code === 1){
    state.gettingQrcode = false
    state.qrcodeIsVaild = true
    let time = 60
    qrcodeInterval = setInterval(()=>{
      if(time <= 1){
        state.qrcodeIsVaild = false
        clearInterval(qrcodeInterval)
      }else{
        time--
        changStatus({ token: wechatRes.token }).then(res=>{
          if(res.code === 0){
            clearInterval(qrcodeInterval)
            state.showWechat = false
            proxy.$message.success(res.msg)
            store.dispatch('getUserInfo')
          }
        })
      }
    },1000)
    state.wechatUrl = wechatRes.url
  }
}

const UnboundWx = ()=>{
  Modal.confirm({
    title: '确认解绑',
    icon: createVNode(ExclamationCircleOutlined),
    content: '确认解绑该微信号吗？',
    okText: '确认',
    cancelText: '取消',
    centered: true,
    class: 'safety-tips',
    async onOk(){
      const res = await unboundWechat()
      if(res.code === 0){
        proxy.$message.success(res.msg)
        store.dispatch('getUserInfo')
      }else{
        proxy.$message.error(res.msg)
      }
    }
  })
}

const getBase64 = (img, callback)=>{
  const reader = new FileReader()
  reader.addEventListener('load', () => callback(reader.result))
  reader.readAsDataURL(img)
}

const handleChange = async info => {
  if (info.file.status === 'uploading') {
    state.uploading = true
    return
  }
  if (info.file.status === 'done') {
    getBase64(info.file.originFileObj, async base64Url => {
      state.imageUrl = base64Url
      if(info.file.response.code === 1){
        const res = await changeImg({ path: info.file.response.path })
        if(res.code === 0){
          state.showUploadImg = false
          await store.dispatch('getUserInfo')
          proxy.$message.success(res.msg)
        }else{
          proxy.$message.error(res.msg)
        }
        state.imageUrl = ''
        state.fileList = []
        state.uploading = false
      }
    })
  }
  if (info.file.status === 'error') {
    state.uploading = false
    info.fileList = []
    proxy.$message.error(info.file.response.msg)
  }
}

const beforeUpload = file => {
  const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
  if (!isJpgOrPng) {
    proxy.$message.error('仅支持jpg或png格式的图片')
  }
  const isLt2M = file.size / 1024 / 1024 < 2
  if (!isLt2M) {
    proxy.$message.error('图像必须小于2MB')
  }
  return isJpgOrPng && isLt2M
}

const nickNameData = reactive({
  showNickName:false,
  updatingNickname: false,
  nicknameForm:{
    nickname: ''
  }
})

const updateNickName = async ()=>{
  nickNameData.updatingNickname = true
  const res = await changeNickname(nickNameData.nicknameForm)
  if(res.code === 0){
    proxy.$message.success(res.msg)
    store.dispatch('getUserInfo')
    closeDialog('nickNameFormRef')
  }else{
    proxy.$message.error(res.msg)
  }
  nickNameData.updatingNickname = false
}

const phoneNextData = reactive({
  phoneStep: 1,
  phoneNextLoading: false,
  showChangePhone: false,
  changPhoneForm:{
    old_mobile: '',
    code: '',
    new_mobile: '',
    new_code: ''
  },
})

const phoneNext = async ()=>{
  phoneNextData.phoneNextLoading = true
  if(phoneNextData.phoneStep === 1){
    const res = await verifyYzm({
      mobile: phoneNextData.changPhoneForm.old_mobile,
      code: phoneNextData.changPhoneForm.code
    })
    if(res.code === 0){
      proxy.$message.success(res.msg)
      phoneNextData.phoneStep += 1
      store.commit('resetCountDown')
    }else{
      proxy.$message.error(res.msg)
    }
    phoneNextData.phoneNextLoading = false
  }else if(phoneNextData.phoneStep === 2){
    const res = await changeMobile(phoneNextData.changPhoneForm)
    if(res.code === 0){
      proxy.$message.success(res.msg)
      store.dispatch('getUserInfo')
      phoneNextData.phoneStep += 1
      store.commit('resetCountDown')
      res.data.length > 0 ? localStorage.setItem('userToken',res.data[0]) : ''
    }else{
      proxy.$message.error(res.msg)
    }
    phoneNextData.phoneNextLoading = false
  }
}

const bindPhoneData = reactive({
  // showBindPhone: !JSON.parse(localStorage.userInfo).userInfo.mobile && localStorage.userToken,
  showBindPhone: false,
  bindIng: false,
  disabledBindPhoneYzm: true,
  disabledBindInput: false,
  bindPhoneForm:{
    mobile: '',
    code: '',
    type: 2
  }
})

const bindPhoneNum = async ()=>{
  bindPhoneData.bindIng = true
  const res = await checkMobile(bindPhoneData.bindPhoneForm)
  if(res.code === 0){
    proxy.$message.success(res.msg)
    store.dispatch('getUserInfo')
    store.commit('resetCountDown')
    closeDialog('bindPhoneFormRef')
  }else{
    proxy.$message.error(res.msg)
  }
  bindPhoneData.bindIng = false
}

const validateBindPhone = async (rules,value)=>{
  bindPhoneData.disabledBindPhoneYzm = true
  if(value === '') return Promise.reject('手机号不能为空')
  if(!store.state.phoneReg.test(value)) return Promise.reject('请输入正确的手机号')
  const res = await checkMobile({ mobile: value, type: 1 })
  if(res.code === 0){
    if(res.msg === 'ok'){
      await Promise.resolve()
      bindPhoneData.disabledBindPhoneYzm = false
    }else if(res.msg.indexOf('注册过') !== -1){
      await Promise.resolve()
      bindPhoneData.disabledBindPhoneYzm = false
      if(!bindPhoneData.disabledBindInput){
        Modal.confirm({
          title: '确认绑定',
          content: res.msg,
          okText: '确认',
          cancelText: '取消',
          okType: 'primary',
          icon: createVNode(ExclamationCircleOutlined),
          keyboard: false,
          centered: true,
          class: 'safety-tips',
          onOk() {
            bindPhoneData.disabledBindInput = true
            store.commit('getYzm',value)
          }
        })
      }
    }
  }else{
    bindPhoneData.disabledBindPhoneYzm = true
    await Promise.reject(res.msg)
  }
}

const passwordData = reactive({
  showPassword: false,
  updatingPwd: false,
  updatePwdOk: false,
  passwordForm:{
    mobile: '',
    code: '',
    password: ''
  }
})

const updatePassword = async ()=>{
  passwordData.updatingPwd = true
  const res = await forgetPwd({ key: encryptedData(JSON.stringify(passwordData.passwordForm)) })
  if(res.code === 1){
    passwordData.updatePwdOk = true
    proxy.$message.success(res.msg)
    store.dispatch('getUserInfo')
    store.commit('resetCountDown')
    closeDialog('passwordFormRef')
  }else{
    proxy.$message.error(res.msg)
  }
  passwordData.updatingPwd = false
}

const closeDialog = ref=>{
  !['uploadImg','bindWechat'].includes(ref) ? proxy.$refs[ref].resetFields() : ''
  document.querySelector('.code-input-box') ? document.querySelector('.code-input-box').style.borderColor = '#d9d9d9' : ''
  switch (ref){
    case 'nickNameFormRef':
      nickNameData.showNickName = false
      break
    case 'bindPhoneFormRef':
      bindPhoneData.showBindPhone = false
      break
    case 'changePhoneFormRef':
      phoneNextData.showChangePhone = false
      phoneNextData.phoneStep = 1
      break
    case 'passwordFormRef':
      passwordData.showPassword = false
      passwordData.updatePwdOk = false
      break
    case 'uploadImg':
      state.imageUrl = ''
      state.fileList = []
      state.uploading = false
      break
    case 'bindWechat':
      clearInterval(qrcodeInterval)
      break
  }
}
</script>

<style lang="less" scoped>
.account-container {
  width: 100%;
  min-width: 1000px;
  min-height: 100vh;
  background-color: @bgc-color;
  box-sizing: border-box;
  padding: 110px 30px 30px;

  &:deep(.ant-layout) {
    max-width: 1440px;
    min-height: calc(100vh - 140px);
    margin: 0 auto;
    background-color: @bgc-color;

    .ant-layout-sider {
      width: 260px !important;
      max-width: unset !important;
      flex: 0 0 260px !important;
      margin-right: 24px;
      background-color: @bgc-color;

      .ant-card {
        border-radius: 8px;
      }

      .sider-top-card {
        width: inherit;
        height: 200px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 12px;

        .ant-card-body {
          padding: 40px 0 35px;
          box-sizing: border-box;

          h3 {
            text-align: center;
            margin-top: 20px;
            font-size: 18px;
            font-weight: 600;
            color: #333333;
          }
          img{
            border-radius: 50%;
          }
        }
      }

      .sider-menu-card {
        width: inherit;
        height: calc(100% - 212px);
        overflow: hidden;

        .ant-card-body {
          padding: 0;

          .ant-menu {
            border: none;

            .ant-menu-item {
              width: unset;
              height: 80px;
              background-color: unset !important;
              text-align: center;
              font-size: 16px;
              color: @content;
              font-weight: 600;
              padding: 0 !important;
              margin: 0 10px !important;
              box-sizing: border-box;
              letter-spacing: 1px;
            }

            .ant-menu-item-selected {
              color: @primary;

              &:after {
                display: none;
              }
            }

            .sider-menu-index {
              color: @sub-title;
              border-bottom: 1px solid @bgc-color;
            }
          }
        }
      }
    }

    .ant-layout-content {
      border-radius: 8px;
      overflow: hidden;
      background-color: #ffffff;

      .content-card {
        border-radius: 8px;
        overflow: hidden;
        .ant-card-head {
          border-radius: 8px 8px 0 0;
          border-bottom-color: @bgc-color;
          overflow: hidden;
          .ant-card-head-title {
            color: @sub-title;
            font-weight: 600;
            font-size: 18px;
            letter-spacing: 1px;
            padding: 20px 0;
          }
        }

        .ant-card-body {
          padding-left: 40px;
          padding-right: 40px;

          .ant-descriptions {
            max-width: 900px;

            .ant-descriptions-item {
              padding-bottom: 40px;

              .ant-descriptions-item-label {
                color: @content;
                margin-right: 32px;
                display: inline-flex;
                align-items: center;

                &:after {
                  display: none;
                }
              }

              .ant-descriptions-item-content {
                display: flex;
                justify-content: space-between;
                color: @text;
                .wechat-account{
                  img{
                    margin-right: 15px;
                    border-radius: 50%;
                  }
                }
                .profile-box {
                  overflow: hidden;
                  position: relative;
                  border-radius: 50%;
                  display: flex;
                  align-items: center;
                  &:hover {
                    .profile-edit {
                      display: block;
                    }
                  }

                  .profile-edit {
                    width: 113px;
                    height: 40px;
                    position: absolute;
                    left: 3.5px;
                    bottom: 0;
                    background-color: rgba(0, 0, 0, 0.6);
                    color: @bgc-color;
                    text-align: center;
                    line-height: 40px;
                    cursor: pointer;
                    display: none;
                  }
                }

                .ant-btn {
                  width: 100px;
                  border-radius: 4px;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>

<style lang="less">
.ant-modal-root {
  .ant-modal-wrap {
    .ant-modal {
      border-radius: 4px;
      overflow: hidden;

      .ant-modal-header {
        border-bottom: none;

        .ant-modal-title {
          color: @primary;
          font-size: 18px;
          font-weight: 500;
        }
      }

      .ant-modal-body {
        border-radius: 4px;
        padding: 40px 70px 50px;

        .ant-form {
          .form-btn-group {
            .ant-form-item-control {
              .ant-form-item-control-input {
                .ant-form-item-control-input-content {
                  display: flex;
                  justify-content: space-between;

                  .ant-btn {
                    height: 40px;
                    width: 160px;
                    border-radius: 4px;
                  }
                }
              }
            }
          }
          .step-complete{
            text-align: center;
            img{
              margin-bottom: 10px;
            }
            .ant-btn{
              height: 40px;
              width: 100%;
            }
          }
        }
      }
    }
  }
  .bind-wechat{
    .ant-modal{
      .ant-modal-content{
        .ant-modal-body{
          text-align: center;
        }
      }
    }
  }
  .update-img{
    .ant-modal{
      .ant-modal-content{
        .ant-modal-body{
          .ant-upload-picture-card-wrapper{
            display: flex;
            justify-content: center;
            .ant-upload{
              color: @sub-title;
            }
          }
          .upload-tips{
            text-align: center;
            color: @content;
            p{
              margin-bottom: 5px;
            }
          }
        }
      }
    }
  }
}
</style>
